<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>

    <script type="text/javascript" src="/js/jquery-3.6.1.js"></script>

    <script type="text/javascript">
        $(function () {
            // 1.给表头的checkbox绑定改变事件
            $("#numFlg").change(function () {
                var status = $(this).prop("checked"); // checked标签是否选择

                // 遍历其他的员工的checkbox，修改的它的状态和上面的一致
                $(".empnoCheck").each(function () {
                    $(this).prop("checked", status); // $(this)当前遍历的元素
                });
            });

            $("#batchDel").click(function () {
                // 创建一个数组
                var empnos = new Array();

                // 获取勾选的checkbox返回的是个数组
                $(".empnoCheck:checked").each(function () {
                    var empno = $(this).val();
                    // 把勾选的员工编号添加到数组中
                    empnos.push(empno);
                });

                // 发送请求给后端
                $.ajax({
                    url: "http://localhost:8080/Emp?action=batchDel",
                    type: "POST",
                    contentType: "application/json", // 前端传递数据的格式
                    data: JSON.stringify(empnos), // 数组怎么传？
                    dataType: "JSON", // 服务端响应的数据格式
                    complete: function () {
                        location.reload(); // 刷新页面
                    }
                });
            });
        })
    </script>
</head>
<body>

<h3>员工列表</h3>
<a href="emp/addEmp.jsp">添加员工</a>
<button id="batchDel">批量删除</button>
<table border="1">
    <tr>
        <th>
            <input type="checkbox" id="numFlg">
        </th>
        <th>编号</th>
        <th>姓名</th>
        <th>职位</th>
        <th>领导</th>
        <th>工资</th>
        <th>奖金</th>
        <th>部门</th>
        <th>入职时间</th>
        <th>操作</th>
    </tr>


    <c:forEach items="${requestScope.page.data}" var="emp">
        <tr>
            <td>
                <input type="checkbox" class="empnoCheck" value="${emp.empno}">
            </td>
            <td>${emp.empno}</td>
            <td>${emp.ename}</td>
            <td>${emp.job}</td>
            <td>${emp.mgrName}</td>
            <td>${emp.sal}</td>
            <td>${emp.comm==null?0.0:emp.comm}</td>
            <td>${emp.deptno}</td>
            <td>${emp.hiredate}</td>
            <td>
                <a href="http://localhost:8080/Emp?action=del&empno=${emp.empno}">删除</a>
                <a href="http://localhost:8080/Emp?action=byId&empno=${emp.empno}">编辑</a>
            </td>
        </tr>
    </c:forEach>
</table>
<a href="Emp?action=page&pageNum=1">首页</a>

<c:if test="${page.pageNum>1}">
    <a href="Emp?action=page&pageNum=${page.pageNum-1}">上一页</a>
</c:if>

<c:if test="${page.pageNum< page.totalPage}">
    <a href="Emp?action=page&pageNum=${page.pageNum+1}">下一页</a>
</c:if>
<a href="Emp?action=page&pageNum=${page.totalPage}">尾页</a>
<hr>
${page}
</body>
</html>
